<template>
	<view class="content">
		<view class="section-0">
			<view class="section-body">
				<view class="progress">
					<view class="projectTop">
						<view class="projectchild1">序号</view>
						<view class="projectchild2">项目名称</view>
					</view>
					<view class="projectButton" v-for="item in list" :key='item.id' @click="go(item)">
						<view class="projectchild1">{{item.id}}</view>
						<view class="projectchild2">{{item.describe}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					id: '1',
					describe: '基于三维建模的大跨越工程智能管理和泛在物联网关键技术研究与应用',
				}, {
					id: '2',
					describe: '阵列式亿级像素图像感知技术在超高型铁塔全过程透明化工程施工中的研究与应用阵列式亿级像素图像感知技术在超高型铁塔全过程透明化工程施工中的研究与应用',
				}, {
					id: '3',
					describe: '异步多线程智能识别算法在特大型大跨越工程中的研究与应用',
				}, {
					id: '4',
					describe: '基于边缘计算数据处理与交互架构的特大型大跨越工程数据交互中心',
				}, {
					id: '5',
					describe: '基于北斗技术的超高型铁塔施工安全防控体系研究',
				}, {
					id: '6',
					describe: '大跨越杆塔高空梯度风风场实测及风荷载特性研究',
				}]
			}
		},
		methods: {
			go(item) {
				let params = {
					id: item.id,
					describe: item.describe
				};
				uni.navigateTo({
					url: '/pages/statistics/management/projectdetails?params=' + JSON.stringify(params)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fff;
	}

	.section-0 {
		width: 100%;
		background-color: #2e5efe;

		.section-body {
			width: 100%;
			padding: 60rpx 35rpx 0 35rpx;
			padding-bottom: 50rpx;
			background-color: #FFFFFF;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			box-sizing: border-box;

			.progress {
				width: 100%;

				.projectTop {
					display: flex;
					font-weight: 700;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #e0e5ee;
					text-align: center;

					.projectchild1 {
						flex: 20%;
					}

					.projectchild2 {
						flex: 80%;
						// height: 100rpx;

					}
				}

				.projectButton {
					display: flex;
					padding-bottom: 20rpx;
					padding-top: 20rpx;
					border-bottom: 1rpx solid #e0e5ee;

					.projectchild1 {
						flex: 20%;
						text-align: center;
						line-height: 80rpx;
					}

					.projectchild2 {
						flex: 80%;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
			}
		}
	}
</style>
